.m-table{
  height:100%;
  width:100%;
  box-sizing: border-box;
  position:relative;
  overflow:hidden;
  &:hover{
    .m-table-bar{
      opacity:1;
      transition:0s;
    }
  }
  &-head{
    position:relative;
    z-index:10;
  }
  &-content{
    height:100%;
    position:relative;
    z-index:1;
  }
  &-core{
    min-width:100%;
    border-collapse: collapse;
    thead{
      background-color:v(background-extra);
      th{
        height: 52px;
        font-size: 16px;
        color:v(text-default);
        font-weight: normal;
        text-align:left;
        padding: 0 16px;
      }
    }
    tbody{
      td{
        height: 48px;
        padding: 0 16px;
        border-bottom:1px solid v(border-default);
      }
    }
  }
  &-prefix,
  &-suffix{
    position:absolute;
    top:0;
    height:100%;
    z-index:99;
    &:before{
      content:"";
      position:absolute;
      display:block;
      top:0;
      left:0;
      background-color:v(background-white);
      width:100%;
      height:100%;
      z-index:1;
    }
    .m-table{
      position:relative;
      z-index:10;
    }
  }
  &-suffix{
    right:0;
    &[focus]{
      box-shadow: -3px 0 6px v(shadow-default);
    }
  }
  &-prefix{
    left:0;
    &[focus]{
      box-shadow: 3px 0 6px v(shadow-default);
    }
  }
  &-bar{
    position:absolute;
    background-color:rgba(0,0,0,0.3);
    border-radius:2px;
    z-index:100;
    opacity: 0;
    transition: 0.3s;
    &.y{
      width: 4px;
      height:100px;
      right:0;
      top:0;
    }
    &.x{
      height:4px;
      width:100px;
      left:0;
      bottom:0;
    }
  }
}